<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="6">
        <el-tree
          ref="tree"
          :data="treeData"
          :props="{ children: 'children', label: 'deviceName' }"
          highlight-current
          default-expand-all
          node-key="deviceId"
          @node-click="handleNodeClick"
        >
        </el-tree>
      </el-col>
      <el-col :span="18">
        <el-descriptions
          v-for="item in list"
          :key="item.deviceName"
          :column="3"
          :title="item.deviceName"
          border
          class="margin-top"
        >
          <el-descriptions-item v-for="e in item.data" :key="e.nodeName" :label="e.nodeName"
            >{{ e.temName }}({{ e.temUnit }})：{{ e.temValueStr || 0 }} {{ e.humName }}({{ e.humUnit }})：{{
              e.humValueStr || 0
            }}
          </el-descriptions-item>
        </el-descriptions>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import deviceApi from '@/api/soil/device'

export default {
  data() {
    return {
      treeData: [],
      list: [],
      query: {
        deviceId: ''
      }
    }
  },
  created() {
    this.getTree()
  },
  methods: {
    getTree() {
      deviceApi.soilList().then((res) => {
        let list = []
        for (let i in res.data) {
          list.push({ deviceName: i, children: res.data[i] })
        }
        this.treeData = list
        if (this.treeData[0].children[0].deviceId) {
          this.$nextTick(() => {
            this.$refs.tree.setCurrentKey(this.treeData[0].children[0].deviceId)
          })

          this.query = {
            ...this.query,
            deviceId: this.treeData[0].children[0].deviceId
          }
          this.getList()
        }
      })
    },
    getList() {
      deviceApi.getRealTimeData(this.query).then((res) => {
        this.list = res.data.data
      })
    },
    handleNodeClick(data) {
      this.query.deviceId = data.deviceId
      this.getList()
    }
  }
}
</script>

<style lang="scss" scoped></style>